<html>
  <head>
    <title>title</title>
    
    <!-- Le meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Nexus - an online counsellor">
    <meta name="author" content="The Nexus Team">
    
    <!-- Le scripts -->
	<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
		
	<script src="http://static.opentok.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  <script type="text/javascript" charset="utf-8">
	var openTokData;
	var session;
	var archive;
	function startSession(){
		jQuery.ajax({
			url: 'startSession?eventId='+${eventId},
			type: 'GET',
			success: function (data){
				openTokData = data;
				if(openTokData != null && openTokData != 'undefined'){
					//document.write(sessionData.sessionId);
					 session = TB.initSession(openTokData.sessionId);			
				     session.addEventListener('sessionConnected', sessionConnectedHandler);
				     session.addEventListener('streamCreated', streamCreatedHandler);
				     TB.addEventListener("exception", exceptionHandler);
				     TB.setLogLevel(TB.DEBUG);
				     session.connect(openTokData.apiKey, openTokData.moderatorToken);
				     
				     session.addEventListener("archiveCreated",
				     archiveCreateHandler);

				     
				}
			}
		});		
	}
	
	function archiveCreateHandler(event) {
        archive = event.archives[0];
	}
       
	function sessionConnectedHandler(event){
			 var publishProps = {height:240, width:320};
		      publisher = TB.initPublisher(openTokData.apiKey, 'publisherDiv');
		      // Send my stream to the session
		      session.publish(publisher);
		      var archiveTitle = "Archive " + new Date().getTime();
		      session.createArchive(openTokData.apiKey, "perSession",
					     archiveTitle);
		      $('#startBtn').text("Stop Teaching");
			  $("#startBtn").attr('onclick','disconnectSession();');
			  var disconnectUrl = "/disconnectSession?eventId="+${eventId};
			  $("#startBtn").attr("href", disconnectUrl);
		      changeStatusBtnToStartRecording();
 	}

	function startRecording(){
		jQuery.ajax({
			url: 'saveArchive?sessionId='+openTokData.id+'&archiveId='+archive.archiveId ,
			type: 'GET',
			success: function (data){
			}});
		session.startRecording(archive);
		session.addEventListener("sessionRecordingInProgress", recordingInProgressHandler);
		session.addEventListener("sessionRecordingStarted", recordingStartedHandler);
		changeStatusToStopRecording();
	}

	function changeStatusBtnToStartRecording(){
		$("#recordBtn").attr("class","btn");
	      $('#recordBtn').text('Start Recording');
	      $("#recordBtn").attr('onclick','startRecording();');
	      $("#recordBtn").attr("href", '#');

	}
	
	function changeStatusToStopRecording(){
		  $('#recordBtn').text('Stop Recording');
	      $("#recordBtn").attr('onclick','stopRecording();');
	      $("#recordBtn").attr("href", '#');		
	}
	function stopRecording(){
		session.stopRecording(archive);
		changeStatusBtnToStartRecording()
	}
	
	function recordingInProgressHandler(event) {
	    alert("There is a recording in progress already.");
	}

	function recordingStartedHandler(event) {
	    alert("The session is being recorded.");
	}
	
	function disconnectSession(){
		if(archive != 'undefined' && archive != ''){
	      	session.closeArchive(archive);
	      	jQuery.ajax({
				url: 'updateArchiveStatus?archiveId='+archive.archiveId+'&status=closed' ,
				type: 'GET',
				success: function (data){
				}});
	      }
		session.disconnect();
	}
	function subscribeToStreams(streams) {
	      for (var i = 0; i < streams.length; i++) {
	        // Make sure we don't subscribe to ourself
	        if (streams[i].connection.connectionId == session.connection.connectionId) {
	          return;
	        }
	        var div = document.createElement('div');
	        div.setAttribute('id', 'stream' + streams[i].streamId);
	        document.getElementById('subscriberDiv').appendChild(div);

	        // Subscribe to the stream
	        var subscribeProps = {height:240, width:320};
	        session.subscribe(streams[i], div.id);
	      }
	    }
	function streamCreatedHandler(event) {
	      // Subscribe to any new streams that are created
	      subscribeToStreams(event.streams);
	    }
	function exceptionHandler(event){
		 TB.log(event.message);
		alert('in exception event');
	}
	
	</script>
</head>
    
<!--     <h1>@Messages("playauthenticate.navigation.startsession")</h1> -->
      <div class="row">
        <div class="span4">
          <h2>My Session</h2>
           <p>Get ready to teach.</p>
          <p><a id="startBtn" class="btn" href="#" onclick="startSession()">Start Teaching &raquo;</a></p>
          <a id="recordBtn"></a> 
        </div>
		</div>
		
<div id="publisherDiv">
</div>    
<div id="subscriberDiv">
</div>
